<template>
  <div class="box">
    <div class="list" v-for="(v, index) in arr" :key="index">
      <img :src="v.src" alt="" />
    </div>
    <div class="next" style="width: 100%; height: 10.9333vw">
      <img src="https://m11.360buyimg.com/babel/jfs/t1/173764/16/25100/6692/61cbce39E04ec8597/48fc760768a918cd.png.webp"
        alt="" style="width: 100%; height: 10.9333vw" />
    </div>
    <div class="dv" style="width: 100%; height: 12vw">
      <img
        src="https://m11.360buyimg.com/babel/s1126x135_jfs/t1/93986/9/20444/26055/61cbce46Ee81285d8/1f230b823b0d0102.png.webp"
        alt="" style="width: 100%; height: 12vw" />
    </div>
  </div>
</template>
  
<script>
import axios from 'axios';
let service = axios.create()
export default {
  data() {
    return {
      arr: [
      ],
    };
  },
  mounted() {
    service({
      url: '  http://localhost:3000/Cyberslist',
      method: 'get'
    }).then(res => {
      console.log(res.data)
      this.arr = res.data
    })
  }
};
</script>
  
<style scoped>
.box {
  width: 100%;
  height: 60vw;
  margin-top: 4vw;
  background-color: #f0f1f7;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
}

.list {
  width: 20%;
  height: 19.4667vw;
  text-align: center;
}

.list img {
  height: 19.4667vw;
}
</style>